<template>
  <div
    v-if="isShow && !isDataAbnormal"
    v-show="!isNoData"
    :id="chartId"
    class="visual_chart"
    :style="{ width: quotaChartW + 'px', height: quotaChartH + 'px' }"
  ></div>
</template>

<script>
import renderChartBase from '@/mixin/render-chart-base.js';
import colorBoard from './color_board';
import { setChartOption } from './chart-option';
import * as echarts from 'echarts';
import { nextTick } from 'vue';
import { shallowRef } from 'vue';

export default {
  mixins: [renderChartBase],
  props: ['w', 'h', 'isShow', 'isLoading', 'isNoData', 'config', 'widgetInstanceId', 'isRealTime', 'isDataAbnormal'],
  emits: ['chartClick'],
  data() {
    return {
      axisColor: '#ccc',
      property: null,

      chartId: 'chartId',
      is1366: false,
      quotaChartW: 0,
      quotaChartH: 0,
      chart: null,
      data: null,
      isBlank: true,
    };
  },
  watch: {
    w() {
      this.resizeChart();
    },
    h() {
      this.resizeChart();
    },
  },
  created() {
    this.is1366 = document.body.clientWidth <= 1366;
    this.chartId = `${this.chartId}_${this.widgetInstanceId}`;
  },
  mounted() {
    nextTick(() => {
      this.quotaChartW = document.getElementById(`chartMain${this.widgetInstanceId}`).offsetWidth;
      this.quotaChartH = document.getElementById(`chartMain${this.widgetInstanceId}`).offsetHeight;
    });
  },
  methods: {
    chartClick(params, data) {
      this.$emit('chartClick', params, data);
    },

    // 生成图表
    async generateChart(data, property, configData) {
      this.$parent.chartIsCreated = false;
      this.$parent.$parent.chartIsCreated = false;
      await this.getQuotaChartWAndQuotaChartH();
      this.property = property;
      this.clearChart();
      const animation = !this.isRealTime;

      // 渲染后生成图表  (每次dispose会不会有性能问题？)
      nextTick(() => {
        if (data) {
          this.chart = shallowRef(echarts.init(document.getElementById(this.chartId), null, { devicePixelRatio: 2 }));
          const option = setChartOption(data, property, configData, { animation });

          // 组件的y轴名称支持国际化
          option.yAxis.name = this.$demoi18n(option.yAxis.name);

          // 折线图根据xvue全局变量判断是否关闭echarts动画，后续提取成全echarts逻辑，目前在折线图做改造
          option.animation = !window?.xVueWeb?.app?.config?.globalProperties?.isCloseEchartsAnimation;

          this.chart.setOption(option);
          this.chart.on('click', params => {
            this.isBlank = false;
            this.chartClick(params, data);
          });
          this.chart.on('legendscroll', () => {
            this.isBlank = false;
          });
          this.chartMouseEvent();
        }
        this.$parent.chartIsCreated = true;
        this.$parent.$parent.chartIsCreated = true;

        // 点击空白处传空值
        this.emitBlankVal();
      });
    },
  },
};
</script>
<style lang="less"></style>
